<template>
  <com-paging :model-value="state.data.recordList" @query="queryList" ref="pagingRef">
    <template #top>
      <view class="top-container">
        <view class="back">
          <com-button @click="toPage()">
            <com-font icon="icon-forward"></com-font>
            <com-font :text="t('exchange.backHome')"></com-font>
          </com-button>
        </view>
        <view class="cards">
          <view class="item" v-for="item in fv.cards">
            <view class="text">{{ item.text }}</view>
            <com-input type="number" :clearable="false" :="item.props" v-if="item.key" v-model="state.data[item.key]" />
            <view class="n" v-else>{{ item.count }}</view>
          </view>
        </view>
        <view class="record-header page-item">
          <view>{{ t('exchange.recordHeader.yesterdayBalance') }}</view>
          <view>{{ t('exchange.recordHeader.todayBalance') }}</view>
          <view>{{ t('exchange.recordHeader.todayProfit') }}</view>
          <view>{{ t('exchange.recordHeader.createTime') }}</view>
          <view>{{ t('exchange.recordHeader.handle') }}</view>
        </view>
      </view>
    </template>
    <view class="container">
      <view class="page-list">
        <view class="page-item" v-for="item, i in state.data.recordList">
          <view>{{ item.yesterdayBalance }}</view>
          <view>{{ item.todayBalance }}</view>
          <view>{{ item.todayProfit }}</view>
          <view>{{ item.createTime }}</view>
          <view @click="revoke(i)"
            :style="{ visibility: i === state.data.recordList.length - 1 ? 'visible' : 'hidden' }">
            {{ t('other.delete') }}
          </view>
        </view>
      </view>
    </view>
  </com-paging>
</template>

<script lang="ts" setup>
import { Input, Paging } from '@/components'
import { t } from '@/locale'
import { isEmpty, toPage } from '@/utils'
import { DateFormat } from '@/utils/const-value'
import dayjs from 'dayjs'
import { computed, reactive, ref, watch } from 'vue'

const localKey = 'exchange-data'
const config = {
  data: { thisMonthTarget: 1000, initBalance: 1000 }
}
const initData = {
  target: config.data.thisMonthTarget,
  profit: 0,
  balance: config.data.initBalance,
  updateBalance: 0,
  recordList: Array<{
    /** 昨日余额 */
    yesterdayBalance: number,
    /** 今日余额 */
    todayBalance: number
    /** 今日盈利 */
    todayProfit: string | number
    /** 记录时间 */
    createTime: string
  }>()
}
const state = reactive({
  data: uni.getStorageSync<typeof initData>(localKey) || initData
})
const pagingRef = ref<Paging.Instance>()
const fv = computed(() => {
  const cards = [
    {
      text: t('exchange.thisMonthTarget'),
      count: state.data.target
    },
    {
      text: t('exchange.thisMonthProfit'),
      count: state.data.profit
    },
    {
      text: t('exchange.balance'),
      count: state.data.balance
    },
    {
      text: t('exchange.updateBalance'),
      key: 'updateBalance' as const,
      props: <Input.Props>{
        onBlur: () => {
          if (isEmpty(state.data.updateBalance) || String(state.data.updateBalance) === '') return
          const balance = state.data.updateBalance - state.data.balance
          state.data.recordList.push({
            yesterdayBalance: state.data.balance,
            createTime: dayjs().format(DateFormat.datetime.replace(DateFormat.year + '-', '')),
            todayBalance: state.data.updateBalance,
            todayProfit: balance > 0 ? '+' + balance : balance
          })
          state.data.balance = state.data.updateBalance
          state.data.updateBalance = 0
        }
      }
    },
  ]
  return {
    cards
  }
})
const queryList: Paging.Props['onQuery'] = () => {
  pagingRef.value?.pagingRef?.complete(state.data.recordList)
}

function setData() {
  uni.setStorageSync(localKey, state.data)
}
setData()

function revoke(index: number) {
  const row = state.data.recordList.splice(index, 1)[0]
  state.data.balance = row.yesterdayBalance
}

watch(() => state.data.balance, () => {
  state.data.profit = state.data.balance - config.data.initBalance
  pagingRef.value?.pagingRef?.complete(state.data.recordList)
  setData()
})
</script>

<style scoped lang="scss" src="./index.scss"></style>